<template>
  <div class="app-container home">


    <div  style="text-align: center;margin-top: 100px">
      <div style="font-weight: bolder;font-size:30px;margin-right: 100px;margin-bottom: 60px">请选择支付方式</div>

        <el-button
          type="danger"
          plain
          icon="el-icon-plus"
          size="mini"
          style="margin-right: 100px"
          @click="nativePay"
        >支付二维码</el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="showdgzz"
        >对公转账</el-button>
  </div>

    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <p class="fontdg">账号：54001033736053004524</p>
      <p  class="fontdg">  开户行：中国建设银行拉萨市林廓北路支行 </p>
      <p  class="fontdg">名称：西藏自治区建筑业协会（转账请备注学员名字同时保留付款凭证以便后续上传审核）。</p>
      <el-form ref="form" :model="form" :rules="rules" style="margin-top: 30px" label-width="120px">
        <el-form-item label="凭证图片" prop="image">
          <image-upload v-model="form.image" :fileSize="30"  :limit="5"/>
        </el-form-item>
<!--        <el-form-item label="备注" prop="remark">-->
<!--          <el-input v-model="form.remark" placeholder="请输入备注" />-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openpay" width="800px" append-to-body>
          <div class="poster-container" style="text-align: center">
            <img :src="payBase64" :width="400" :height="400" />
          </div>

      <div slot="footer" class="dialog-footer">
         <el-button @click="cancelpay">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {nativePay,getSerialNumber, listBusinessorder, getBusinessorder, delBusinessorder, addBusinessorder, updateBusinessorder,addDgzz } from "@/api/business/businessorder";

export default {
  name: "Index",
  data() {
    return {
      open: false,
      openpay: false,
      form: {
        image: [],
        remark: "",
        payType:""
      },
      title: "",
      payBase64:"",
      rules: {
        image: [
          { required: true, message: "凭证图片不能为空", trigger: "blur" }
        ]
      },
      // 版本号
      version: "3.8.9"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    showdgzz(){
      // 对公转账
      this.open=true;
      this.form.image =""
      this.title == "对公转账";

    },
    nativePay(){
      this.openpay=true;
      this.title == "支付二维码";
      // getSerialNumber().then(response => {
      //   console.log(response);
      // });
      nativePay().then(response => {
        if (response.code == 200) {
          this.payBase64 ="data:image/png;base64,"+ response.msg;
        }else {
          this.$modal.msgError("操作失败");
        }
      });

    },
    cancel(){
      this.open=false;
    },
    cancelpay(){
      this.openpay=false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.payType="2";
          addDgzz(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.fontdg {
  font-weight: bolder;
  margin-left: 50px;

}
</style>

